<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
    <script src="../Ajs/vue.min.js"></script>
</head>
<body>

<div id="box">
    <div>
        <input type="text" v-focus/>
    </div>

    <div>
        <div v-color="{color:'red'}">123</div>
    </div>
</div>


<script>
    Vue.directive("focus",{   //directive 要放到 vue实例的前面
        inserted:function(el){
            el.focus();
        }
    });

    Vue.directive("color",{   //directive 要放到 vue实例的前面
        inserted:function(el,binding){
            el.style.color = binding.value.color;
        }
    });
    var vm = new Vue({
        el:"#box",
        data:{
        },
        methods:{

        }
    });



    /*
    方式一：
    1.为何需要自定义指令?
        内置指令不满足需求
    2.自定义指令的语法规则（获取元素焦点）
        vue.directive('focus',{
            inserted: function (el) {
                //获取元素的焦点
                el.focus ();
            }
        })
    3.自定义指令用法
        <input type="text" v-focus/>


    方式二：
    4.携带参数的自定义指令（改变元素背景色）
        vue.directive('color',{
            inserted: function (el,binding) {
                el.style.backgroundColor = binding.value.color;
            }
        })


    方式三：


     */





</script>

</body>
</html>
